<template>
	<view class="game-recharge">
		<!-- <view class="items-wrapper">
	    <view @click="showPayDialog(item)" class="recharge" :class="item['class']" v-for="(item, index) in props.prices" :key="index">
	      <view class="price">
	        <text>￥{{ item['show_price'] }}</text>
	      </view>
	    </view>
	  </view> -->
		<view class="items-wrapper1">
			<view @click="showPayDialog(item)" class="recharge1" :class="item['class']"
				v-for="(item, index) in props.prices" :key="index">
			</view>
		</view>

		<pay v-if="payBoxShow" :gameId="props.gameId" :gameType="props.gameType" :gameIndex="props.gameIndex"
			:image="props.image" :price="props.price" :title="props.title" :count="buyCount" :ifFull="props.ifFull"
			@close="closePayDialog" @success="onPaySuccess" />
	</view>

	<!-- gifts popup -->
	<van-dialog use-slot :show="giftsDialogVisible" :show-confirm-button="false" width="312">
		<gifts-dialog-content :gifts="gifts" v-on:close="closeGiftsDialog" />
	</van-dialog>
</template>

<script setup lang="ts">
	import Pay from '@/wxcomponents/pay'
	import GiftsDialogContent from '@/wxcomponents/gifts-dialog-content'
	import { ref } from "vue";

	let props = defineProps([
		'title',
		'prices',
		'gameId',
		'gameType',
		'gameIndex',
		'image',
		'price',
		'ifFull',
	])

	/**
	 * prices
	 *  price: 单价，单位是分
	 *  show_price: 购买按钮显示的价格
	 *  class: 显示的class
	 */

	const emits = defineEmits(['success'])
	let payBoxShow = ref(false)
	let buyCount = ref(0)

	const gifts = ref([])

	const giftsDialogVisible = ref(false)

	function onPaySuccess(val) {
		// 显示奖品信息
		gifts.value = val
		giftsDialogVisible.value = true

		emits('success')
	}

	function closeGiftsDialog() {
		giftsDialogVisible.value = false
	}

	function showPayDialog(item) {
		payBoxShow.value = true

		buyCount.value = item['count']
	}

	function closePayDialog() {
		payBoxShow.value = false
	}
</script>

<style scoped lang="scss">
	.game-recharge {
		// width: 152rpx;
		height: 160px;
	}

	.items-wrapper1 {
		
		display: flex;
		flex-direction: column;
		z-index: 3333;
	}

	.items-wrapper {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-image: url('/static/owo/game-recharge-bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		aspect-ratio: 375/156;
	}

	.recharge {
		background-size: contain;
		background-repeat: no-repeat;
		width: 85px;
		aspect-ratio: 85/68;
		position: relative;
		top: -20px;
	}

	.recharge .price {
		color: white;
		font-weight: 400;
		font-size: 10px;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;

		text {
			padding: 5rpx;
			background: linear-gradient(90deg, #205DE9 0%, #8E6CF4 100%);
			border-radius: 5rpx;
		}
	}
	.recharge1 {
		width: 136rpx;
		height: 152rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.recharge1.recharge-1 {
		background-image: url('/static/owo/1recharge-1.png');
	}
	.recharge1.recharge-3 {
		background-image: url('/static/owo/1recharge-3.png');
	}
	.recharge1.recharge-5 {
		background-image: url('/static/owo/1recharge-5.png');
	}
	.recharge1.recharge-0 {
		background-image: url('/static/owo/1recharge-0.png');
	}
	.recharge.recharge-1 {
		background-image: url('/static/owo/recharge-1.png');
	}

	.recharge.recharge-2 {
		background-image: url('/static/owo/recharge-2.png');
	}

	.recharge.recharge-3 {
		background-image: url('/static/owo/recharge-3.png');
	}

	.recharge.recharge-5 {
		background-image: url('/static/owo/recharge-5.png');
	}

	.recharge.recharge-10 {
		background-image: url('/static/owo/recharge-10.png');
	}

	.recharge.recharge-12 {
		background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/recharge-12.png');
	}

	.recharge.recharge-0 {
		background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/recharge-all.png');
	}

	.recharge.recharge-50 {
		background-image: url('/static/owo/recharge-50.png');
	}
</style>